/*jslint unparam : true, white: true*/

function humansToVertices(humans) {
    "use strict";
    var ret = [],
        i;
    for (i = 0; i < humans.length; i += 1) {
        ret.push([humans[i].PhotoCoords.X, humans[i].PhotoCoords.Y]);
    }
    return ret;
}

function getHumanText(index, humans) {
    "use strict";
    if (humans[index].Name !== "") {
        return humans[index].Name;
    }
    return "Index: " + index + "</br>Data: " + "(x: " + humans[index].PhotoCoords.X + ", y:" + humans[index].PhotoCoords.Y + ")";
}

function draw_voronoi(vertices, w, h, d3, humans) {
    "use strict";
    var svg = d3.select("#mouseover-container")
        .append("svg:svg")
        .attr("width", w)
        .attr("height", h)
        .append("svg:g")
        .attr("width", "100%")
        .attr("height", "100%")
        .attr("enable-background", "new"),
        paths, points, clips;

    svg.append("svg:image")
        .attr("xlink:href", "http://localhost:8888/media/class-photos/2008-jesus-cambridge-lores.jpeg")
        .attr("width", "100%")
        .attr("height", "100%")
        .attr("id", "class-pic");

    clips = svg.append("svg:g").attr("id", "point-clips");
    points = svg.append("svg:g").attr("id", "points");
    paths = svg.append("svg:g").attr("id", "point-paths");

    clips.selectAll("clipPath")
        .data(vertices)
        .enter().append("svg:clipPath")
        .attr("id", function (d, i) {
        return "clip-" + i;
    })
        .append("svg:circle")
        .attr('cx', function (d) {
        return d[0];
    })
        .attr('cy', function (d) {
        return d[1];
    })
        .attr('r', 10);

    paths.selectAll("path")
        .data(d3.geom.voronoi(vertices))
        .enter().append("svg:path")
        .attr("d", function (d) {
        return "M" + d.join(",") + "Z";
    })
        .attr("id", function (d, i) {
        return "path-" + i;
    })
        .attr("clip-path", function (d, i) {
        return "url(#clip-" + i + ")";
    })
        .style("fill", d3.rgb(230, 230, 230))
        .style('opacity', 0.2)
        .style("stroke", d3.rgb(200, 200, 200));

    paths.selectAll("path")
        .on("mouseover", function (d, i) {
        d3.select(this)
            .style('fill', d3.rgb(31, 120, 180));
        svg.select('circle#point-' + i)
            .style('fill', d3.rgb(31, 120, 180));
        d3.select("#human-details").html(getHumanText(i, humans));
    })
        .on("mouseout", function (d, i) {
        d3.select(this)
            .style("fill", d3.rgb(230, 230, 230));
        svg.select('circle#point-' + i)
            .style('fill', 'white');
        d3.select("#human-details").html("");
    });

    points.selectAll("circle")
        .data(vertices)
        .enter().append("svg:circle")
        .attr("id", function (d, i) {
        return "point-" + i;
    })
        .attr("transform", function (d) {
        return "translate(" + d + ")";
    })
        .attr("r", 2)
        .attr('stroke', 'none')
        .style("fill-opacity", 0);
}
